<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="24" class="s18">
        <div class="grid-content1 bg-purple-dark" @click="show3 = !show3">
          <span><i :class="show3? 'el-icon-caret-top' : 'el-icon-caret-bottom'"/> {{ show3? $t('search.select') : $t('search.select2') }}</span>
        </div>
      </el-col>
    </el-row>
    <el-collapse-transition>
      <div v-show="show3">
        <el-row :gutter="20" class="queryConditions">
          <!-- 下单时间 -->
          <el-col :span="8">
            <el-row>
              <el-col :span="6"><span>{{ $t('search.ordertime') }}</span></el-col>
              <el-col :span="15">
                <el-date-picker
                  v-model="dataTime"
                  :picker-options="pickerOptions"
                  :default-time="['00:00:00', '23:59:59']"
                  :start-placeholder="$t('search.startime')"
                  :end-placeholder="$t('search.endtime')"
                  type="datetimerange"
                  style="width:100%;"
                  range-separator="-"/>
              </el-col>
            </el-row>
          </el-col>
          <!-- 下单方式 -->
          <el-col :span="8">
            <el-row>
              <el-col :span="7"><span>{{ $t('search.status') }}</span></el-col>
              <el-col :span="15">
                <el-select v-model="status" :placeholder="$t('search.placeholder')" clearable class="elect">
                  <el-option :label="$t('search.label1')" value="1"/>
                  <el-option :label="$t('search.label2')" value="2"/>
                  <el-option :label="$t('search.label3')" value="3"/>
                </el-select>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-button type="primary">{{ $t('table.look') }}</el-button>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>

    <div class="title">
      <svg-icon icon-class="dataList" class-name="custom-class"/>
      <p style="display: inline;">{{ $t('table.list') }}</p>
      <div style="float:right;">
        <el-button size="mini">{{ $t('export.exportbtn') }}</el-button>
        <el-select v-model="row" :placeholder="$t('export.select')" style="width:100px" class="sel" clearable>
          <el-option :label="10 + $t('export.strip')" value="1"/>
          <el-option :label="20 + $t('export.strip')" value="2"/>
          <el-option :label="40 + $t('export.strip')" value="3"/>
          <el-option :label="100 + $t('export.strip')" value="4"/>
        </el-select>
      </div>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="logding"
      ref="multipleTable"
      :row-key="getRowKeys"
      :data="tableData.slice((pageno - 1) * pagesize, pageno * pagesize)"
      stripe
      style="width: 100%"
      border
      tooltip-effect="dark"
      @selection-change="handleSelectionChange">

      <el-table-column :reserve-selection="false" type="selection" width="50"/>

      <!-- 订单id -->
      <el-table-column :label="$t('table.orderid')" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>

      <!-- 订单价格 -->
      <el-table-column :label="$t('table.orderpic')">
        <template slot-scope="scope">
          <span>{{ scope.row.orderPic }}</span>
        </template>
      </el-table-column>

      <!-- 商品名称 -->
      <el-table-column :label="$t('table.goodsname')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.orderName }}</span>
        </template>
      </el-table-column>

      <!-- 下单地址 -->
      <el-table-column :label="$t('table.orderess')" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.orderAddress }}</span>
        </template>
      </el-table-column>

      <!-- 买家姓名 -->
      <el-table-column :label="$t('table.buyname')" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.buyerName }}</span>
        </template>
      </el-table-column>

      <!-- 店铺名称 -->
      <el-table-column :label="$t('table.shopname')" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.storeName }}</span>
        </template>
      </el-table-column>

      <!-- 店铺id -->
      <el-table-column :label="$t('table.shopid')" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.storeId }}</span>
        </template>
      </el-table-column>

      <!-- 店铺地址 -->
      <el-table-column :label="$t('table.shopadd')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.storeAddress }}</span>
        </template>
      </el-table-column>

      <!-- 下单时间 -->
      <el-table-column :label="$t('table.ordertime')" width="200">
        <template slot-scope="scope">
          <span v-if="scope.row.orderTime">{{ scope.row.orderTime | dateFilter }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>

      <!-- 订单状态 -->
      <el-table-column :label="$t('table.orderstatus')" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.orderStatus | statusFulter }}</span>
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('table.operation')"
        fixed="right"
        width="150">
        <template slot-scope="scope">
          <router-link :to="'/order/orderList/sonOrderDetail/' + scope.row.id">
            <el-button type="text">{{ $t('table.look') }}</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <div class="pagination">
      <el-pagination
        :page-size="pagesize"
        :total="tableData.length"
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
  </div>
</template>

<script>
import { orderData } from '@/api/order'
export default {
  name: 'SonOrderList',
  filters: {
    statusFulter(status) {
      const staMap = {
        1: '已支付',
        2: '支付超时',
        3: '未支付'
      }
      return staMap[status]
    }
  },
  data() {
    return {
      show3: true, // 显示筛选
      dataTime: '', // 提交时间
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      row: '', // 下拉显示条数
      logding: false, // 加载
      getRowKeys(row) { // 翻页全选
        return row.orderId
      },
      tableData: [], // 表格数据
      pagesize: 10, // 每页显示10条
      pageno: 1, // 第一页
      status: '' // 下单状态
    }
  },
  created() {
    this.orderData()
  },
  methods: {
    // 多选
    handleSelectionChange(rows) {
      this.multipleSelection = rows
    },
    handleSizeChange(size) {
      this.pagesize = size
    },
    handleCurrentChange(currentPage) {
      this.pageno = currentPage
    },
    // 获取订单数据
    orderData() {
      const self = this
      self.logding = true
      const params = new URLSearchParams()
      orderData(params).then(res => {
        // console.log(res)
        if (res.code === 200) {
          self.logding = false
          self.tableData = res.result.dataList
        } else {
          self.logding = false
          self.tableData = []
        }
      })
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
}
.grid-content {
  min-height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
}
.grid-content1 {
  min-height: 50px;
  line-height: 50px;
  margin-bottom: 20px;
  cursor: pointer;
  text-align: right;
  padding-right: 20px;
}
.bg-purple-dark {
  background: rgba(243, 243, 243, 1);
}
.s18 {
  padding-right: 0!important;
}
.s6 {
  padding-left: 0!important;
}
.queryConditions span {
  font-size: 16px;
  line-height: 40px;
}
.title {
  text-align: left;
  height: 50px;
  line-height: 50px;
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 40px;
  background: rgba(243, 243, 243, 1);
}
.dashboard-container >>> .sel .el-input__inner {
  height: 24px!important;
  line-height: 24px!important;
  font-size: 13px!important;
}
.pagination {
  margin: 30px auto;
  text-align: center;
}
</style>
